import PropTypes from "prop-types"
import React, { memo, useState } from "react"
import { FilterWrapper } from "./style"
import filter_data from "@/assets/data/filter_data"

 const EntireFilter = memo((props) => {

  /** 定义内部状态 */
  const [selectedItems, setSelectedItems] = useState([])

  /**事件处理逻辑 */
  const itemClickHanlde=(item)=>{
    if(selectedItems.includes(item)){
      // 删除
        setSelectedItems(selectedItems.filter((v)=>v!=item))
    }
    else{
      // 添加
      setSelectedItems([...selectedItems, item])
    }
  }
    return (
        <FilterWrapper>
            <div className="filter">
                {filter_data.map((item, index) => {
                    return (
                        <div
                            className={`item ${selectedItems.includes(item) ? "active" : ""}`}
                            key={item}
                            onClick={()=>itemClickHanlde(item)}
                        >
                            {item}
                        </div>
                    )
                })}
            </div>
        </FilterWrapper>
    )
})

EntireFilter.propTypes = {}

export default EntireFilter
